<template>
  <div>
    <div class="item" v-for="(item, index) in article" :key="index" @click="handleJump(item._id)">
      <img :src="item.imgSrc" alt="" />
      <h1 style="font-size: 20px; font-weight: 600">{{ item.title }}</h1>
      <p style="color:#b0b0b0;text-align:left;text-indent:0.5rem">{{item.content}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: [],
    };
  },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/article").then((res) => {
    //   console.log(res.data.res);
      this.article = res.data.res;
    });
  },methods: {
      handleJump(val){
        //   console.log(val);
          var id=val
          this.$router.push(`/articleDetail/${id}`);
      }
  },
};
</script>

<style scoped>
img {
  width: 10rem;
}
.item{
    margin-bottom: 0.6667rem;
}
</style>